window.addEventListener("load", function () {
  // 获取元素
  var focus = document.querySelector(".focus");
  // 获取ul
  var ul = focus.children[0];
  // 获取ol
  var ol = focus.children[1];
  //   console.log(ol.querySelector(".current"));
  // 获取focus盒子的宽度
  var w = focus.offsetWidth;
  // 开启定时器
  var index = 0;
  var timer = setInterval(function () {
    index++;
    // 移动的位置
    var movePosition = -index * w;
    // console.log(movePosition);
    // 添加过渡属性
    ul.style.transition = "all .3s";
    // 让ul开始移动
    ul.style.transform = `translateX(${movePosition}px)`;
  }, 2000);
  // 观察 ul 如果过渡已经完成了 为了实现循环播放的功能
  ul.addEventListener("transitionend", function () {
    if (index >= 3) {
      index = 0;
      var movePosition = -index * w;
      // 去掉过渡的效果
      ul.style.transition = "none";
      // 让ul开始移动
      ul.style.transform = `translateX(${movePosition}px)`;
    } else if (index < 0) {
      index = 2;
      var movePosition = -index * w;
      // 去掉过渡的效果
      ul.style.transition = "none";
      // 让ul开始移动
      ul.style.transform = `translateX(${movePosition}px)`;
      //   location.reload();
    }

    // 将ol里面的li带有 类名为 current的 将它remove掉
    ol.querySelector(".current").classList.remove("current");
    // 需要给当前的ol里面的li添加类名为current
    ol.children[index].classList.add("current");
  });
  var startX = 0;
  var moveX = 0;
  ul.addEventListener("touchstart", function (e) {
    // 得到手指按下去的初始坐标值
    startX = e.targetTouches[0].pageX;
    // 清除定时器
    clearInterval(timer);
  });
  // 手指拖动
  ul.addEventListener("touchmove", function (e) {
    // 得到手指拖动的位置
    moveX = e.targetTouches[0].pageX - startX;
    var movePosition = -index * w + moveX;
    // 去掉过渡的效果
    ul.style.transition = "none";
    // 让ul开始移动
    ul.style.transform = `translateX(${movePosition}px)`;
    e.preventDefault(); // 阻止滚动屏幕的行为
  });

  ul.addEventListener("touchend", function (e) {
    // 如果移动的距离超过了50
    if (Math.abs(moveX) > 50) {
      // 在这里吗要么上一张图片要么下一张图片
      // 如果moveX大于0 就应该播放上一张
      // 如果moveX小于0 就应该播放下一张
      if (moveX > 0) {
        index--;
      } else {
        index++;
      }
      var movePosition = -index * w;
      // console.log(movePosition);
      // 添加过渡属性
      ul.style.transition = "all .3s";
      // 让ul开始移动
      ul.style.transform = `translateX(${movePosition}px)`;
    } else {
      // (2) 如果移动距离小于50像素我们就回弹
      var translatex = -index * w;
      ul.style.transition = "all .1s";
      ul.style.transform = "translateX(" + translatex + "px)";
    }

    clearInterval(timer);
    timer = setInterval(function () {
      index++;
      // 移动的位置
      var movePosition = -index * w;
      // console.log(movePosition);
      // 添加过渡属性
      ul.style.transition = "all .3s";
      // 让ul开始移动
      ul.style.transform = `translateX(${movePosition}px)`;
    }, 2000);
  });
});
